<template>
  <div>
    <el-row class="back-head" type="flex" align="middle">
      <span @click="backPath()" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
      <span class="primary">创建新用户首单立减</span>
    </el-row>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-width="120px" label-position="right" size="small">
        <el-row class="head" type="flex" align="middle">活动信息</el-row>
        <div class="item">
          <el-form-item v-if="$store.state.showAgent" label="所属区域" prop="agentid" :rules="[{ required: true, message: '请选择区域', trigger: 'blur' }]">
            <el-select v-model="params.agentid" filterable default-first-option placeholder="--区域--">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' }]">
            <el-input v-model="params.name" placeholder="输入活动名称" />
          </el-form-item>

          <el-form-item label="优惠" required style="margin-bottom: 0">
            <el-row type="flex">
              <el-row type="flex">
                <span>下单立减</span>
                <el-form-item prop="lesss" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number style="margin: 0 5px;"  v-model="params.lesss" :min='params.agentSubsidy?params.agentSubsidy:0' :max='9999' :precision='2' />
                </el-form-item>
                <span>{{comConfig.unit}}，</span>
              </el-row>
              <el-row type="flex">
                <span style="line-height: 32px">区域补贴</span>
                <el-form-item prop="agentSubsidy" :rules="[{ required: true, message: '请输入金额' }]">
                  <el-input-number style="margin: 0 5px;" v-model="params.agentSubsidy" :min='0' :max='params.lesss?params.lesss:0' :precision='2' />
                </el-form-item>
                <span>{{comConfig.unit}}，商家补贴{{params.lesss-params.agentSubsidy||0}}{{comConfig.unit}}</span>
              </el-row>
            </el-row>
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">活动时间</el-row>
        <div class="item">
          <el-form-item label="起止日期" prop="startTimeToendTime" :rules="[{ required: true, message: '请起止日期', trigger: 'blur' }]">
            <pt-date-picker style="width:500px;" v-model="params.startTimeToendTime" :disabledDate="time => time.getTime() <= (Date.now() - 3600 * 1000 * 24 )" />
          </el-form-item>
        </div>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="issubmitLoading">保存去选门店</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        issubmitLoading: false,  //提交表单等待
        params: {
          agentid: '', //区域id
          ptype: '8', //活动类型
          name: '', //活动名称
          lesss: '',//减少
          agentSubsidy: '', //区域补贴
          startTimeToendTime: '',//截止日期
          shared: true //不同享
        },
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val) {
          if (val && val.length) {
            if (val.length === 1) { // 只有一个区域 直接显示
              this.params.agentid = val[0].id
            }
          }
        },
        deep: true
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            params.startTimeToendTime = params.startTimeToendTime ? params.startTimeToendTime.join(',') : ''
            this.issubmitLoading = true
            this.$http.post('/server/activity/save', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '添加新用户立减成功'})
                this.$router.push({path: '/main/activity/cnewuser', query: {id: res.data.data.activityId}})
              }
            }).finally(() => { this.issubmitLoading = false })
          } else {
            tthis.$message.error('有不合法的输入或未填写的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      backPath() {
        this.$router.replace({path: '/main/activity/pron'})
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length === 1) {
        this.params.agentid = this.restaurants[0].id
      }
    }
  }
</script>
<style lang="scss" scoped>
  .primary {
    color: $c-active-newuser;
  }
  .main .head {
    background: $c-active-newuser;
  }
  @import './css/actives.scss';
</style>

